@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #app {
  height: 100%;
  max-height: 100%;
  font-family: "Quicksand", sans-serif;
}

/* fixes overflowing on certain devices */
.public-DraftEditor-content {
  overflow-wrap: anywhere !important;
}

.DraftEditor-root {
  flex: 1 1 0;
  overflow: auto;
}
.loading_border {
  padding: 11px;
  outline:none;
  border: none;
  border-radius: 1px;
  box-shadow: none;
  background-image: 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    
    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240));
  
  background-position: 0 0, 0 0, 0 100%, 0 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 0%, 0% 1px, 0% 1px, 1px 0%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  background-color:transparent;
  background-repeat:no-repeat;
  transition:0.4s linear;
}

.border_inference_animate {
  animation: animate 4s linear infinite;
}

.border_inference_pending {
  background-image: 
    linear-gradient(#8d8e8f, #8d8e8f), 
    linear-gradient(#8d8e8f, #8d8e8f), 
    linear-gradient(#8d8e8f, #8d8e8f), 
    linear-gradient(#8d8e8f, #8d8e8f), 

    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240)), 
    linear-gradient(rgba(226 232 240), rgba(226 232 240));
}

.border_inference_complete {
  background-image: 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155), 
    linear-gradient(#334155, #334155);
}

.border_inference_error {
  background-image: 
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760), 
    
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760), 
    linear-gradient(#f56760, #f56760);
}

@keyframes animate {
  0% {
  background-position: 0 100%, 0 0, 0 100%, 100% 0, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 0%, 100% 1px, 0% 1px,1px 0%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  }
  40% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 0, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 0%, 100% 1px, 0% 1px,1px 100%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  }
  60% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 0%, 0% 1px, 100% 1px,1px 100%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  }
  70% {
  background-position: 0 100%, 100% 0, 0% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 100%, 0% 1px, 100% 1px,1px 0%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  }
  80% {
  background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 100%, 0% 1px, 0% 1px,1px 0%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;
  }
  100% {
  background-position: 0% 0%, 0 0, 0 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 1px 0%, 100% 1px, 0% 1px,1px 0%,  
                   1px 100%, 100% 1px, 100% 1px,1px 100%;  
  }
}

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
  --tw-border-opacity: 1;
  background-color: rgba(217,217,227,.8);
  border-color: rgba(255,255,255,var(--tw-border-opacity));
  border-radius: 9999px;
  border-width: 1px;
}

/* Customize the track */
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 9999px;
}

/* Customize the thumb */
::-webkit-scrollbar-thumb {
  background-color: #a1a1a1;
  border-radius: 9999px;
  border: 1px solid #a1a1a1;
}

/* Set the scrollbar size */
::-webkit-scrollbar {
  height: 0.3rem;
  width: 0.3rem;
}

/* Set the scrollbar's corners to round */
::-webkit-scrollbar-corner {
  background: transparent;
}

.item-enter {
  opacity: 0;
}
.item-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.item-exit {
  opacity: 1;
}
.item-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
